<template>
  <div class="hotRecommend">
    <!-- 左边 -->
    <div class="hotLeft">
      <!-- 抬头分类 -->
      <div class="category">
        <a class="hotWords" href="#">热门推荐</a>
        <div class="categoryList">
          <a href="#">华语</a>
          <a href="#">流行</a>
          <a href="#">摇滚</a>
          <a href="#">民谣</a>
          <a href="#">电子</a>
        </div>

        <span class="more">
          <a href="#">更多</a>
          <img src="" alt="" />
        </span>
      </div>
      <!-- 歌单展示列表 -->
      <div class="playlist">
        <div class="top">
          <div class="playlistItem">
            <div class="playDistrict">
              <img src="./images/d.jpg" alt="歌单封面" />
              <div class="playButton">102863万</div>
            </div>
            <div class="description">
              <a href="">
                [华语速爆新歌] 毛不易全新专辑第一主打单曲，将生活写进歌里</a
              >
            </div>
          </div>

          <div class="playlistItem">
            <div class="playDistrict">
              <img src="./images/d.jpg" alt="歌单封面" />
              <div class="playButton">102863万</div>
            </div>
            <div class="description">
              <a href="">
                [华语速爆新歌] 毛不易全新专辑第一主打单曲，将生活写进歌里</a
              >
            </div>
          </div>

          <div class="playlistItem">
            <div class="playDistrict">
              <img src="./images/d.jpg" alt="歌单封面" />
              <div class="playButton">102863万</div>
            </div>
            <div class="description">
              <a href="">
                [华语速爆新歌] 毛不易全新专辑第一主打单曲，将生活写进歌里</a
              >
            </div>
          </div>

          <div class="playlistItem">
            <div class="playDistrict">
              <img src="./images/d.jpg" alt="歌单封面" />
              <div class="playButton">102863万</div>
            </div>
            <div class="description">
              <a href="">
                [华语速爆新歌] 毛不易全新专辑第一主打单曲，将生活写进歌里</a
              >
            </div>
          </div>
        </div>

        <div class="bottom">
          <div class="playlistItem">
            <div class="playDistrict">
              <img src="./images/d.jpg" alt="歌单封面" />
              <div class="playButton">102863万</div>
            </div>
            <div class="description">
              <a href="">
                [华语速爆新歌] 毛不易全新专辑第一主打单曲，将生活写进歌里</a
              >
            </div>
          </div>

          <div class="playlistItem">
            <div class="playDistrict">
              <img src="./images/d.jpg" alt="歌单封面" />
              <div class="playButton">102863万</div>
            </div>
            <div class="description">
              <a href="">
                [华语速爆新歌] 毛不易全新专辑第一主打单曲，将生活写进歌里</a
              >
            </div>
          </div>

          <div class="playlistItem">
            <div class="playDistrict">
              <img src="./images/d.jpg" alt="歌单封面" />
              <div class="playButton">102863万</div>
            </div>
            <div class="description">
              <a href="">
                [华语速爆新歌] 毛不易全新专辑第一主打单曲，将生活写进歌里</a
              >
            </div>
          </div>

          <div class="playlistItem">
            <div class="playDistrict">
              <img src="./images/d.jpg" alt="歌单封面" />
              <div class="playButton">102863万</div>
            </div>
            <div class="description">
              <a href="">
                [华语速爆新歌] 毛不易全新专辑第一主打单曲，将生活写进歌里</a
              >
            </div>
          </div>
        </div>
      </div>

      <!-- 新碟上架 -->
      <div>
        <div class="newCD">
          <a href="#">新碟上架</a>
          <span>更多</span>
        </div>

        <!-- 轮播图 -->
        <el-carousel :interval="4000" type="card" height="200px">
          <el-carousel-item v-for="item in 6" :key="item">
            <h3 class="medium">{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 榜单 -->
      <div class="rank">
        <span>榜单</span>
        <a href="#">更多</a>
      </div>

      <!-- 榜单列表 -->

      <div class="rankList">
        <dl>
          <dt class="light">
            <img src="./images/h.jpg" alt="飙升榜" />
            <div class="three">
              <a href="#">飙升榜</a>
              <div class="playGo">
                <i class="el-icon-video-play"></i>
                <i class="el-icon-folder-add"></i>
              </div>
            </div>
          </dt>
          <dd>
            <ol>
              <li class="dark">
                <span style="color: #c10d0c">1</span><a href="#">窗</a>
                <i class="el-icon-video-play"></i><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="light">
                <span style="color: #c10d0c">2</span><a href="#">好久不见</a>
                <i class="el-icon-video-play"></i><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="dark">
                <span style="color: #c10d0c">3</span
                ><a href="#">Best Friend </a> <i class="el-icon-video-play"></i
                ><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="light">
                <span>4</span><a href="#">银河与星斗</a>
                <i class="el-icon-video-play"></i><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="dark">
                <span>5</span><a href="#">心动的瞬间</a>
                <i class="el-icon-video-play"></i><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="light">
                <span>6</span><a href="#">A Few Bad </a>
                <i class="el-icon-video-play"></i><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="dark">
                <span>7</span><a href="#">小星球</a>
                <i class="el-icon-video-play"></i><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="light">
                <span>8</span><a href="#">夜车 (歌手)</a>
                <i class="el-icon-video-play"></i><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="dark">
                <span>9</span><a href="#">A TO Z</a>
                <i class="el-icon-video-play"></i><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="light">
                <span class="ten">10</span><a href="#">A TO Z</a>
                <i class="el-icon-video-play"></i><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="dark check"><a href="#">查看更多></a></li>
            </ol>
          </dd>
        </dl>

        <dl>
          <dt class="light">
            <img src="./images/h.jpg" alt="飙升榜" />
            <div class="three">
              <a href="#">飙升榜</a>
              <div class="playGo">
                <i class="el-icon-video-play"></i>
                <i class="el-icon-folder-add"></i>
              </div>
            </div>
          </dt>
          <dd>
            <ol>
              <li class="dark">
                <span style="color: #c10d0c">1</span><a href="#">窗</a>
                <i class="el-icon-video-play"></i><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="light">
                <span style="color: #c10d0c">2</span><a href="#">好久不见</a>
                <i class="el-icon-video-play"></i><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="dark">
                <span style="color: #c10d0c">3</span
                ><a href="#">Best Friend </a> <i class="el-icon-video-play"></i
                ><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="light">
                <span>4</span><a href="#">银河与星斗</a>
                <i class="el-icon-video-play"></i><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="dark">
                <span>5</span><a href="#">心动的瞬间</a>
                <i class="el-icon-video-play"></i><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="light">
                <span>6</span><a href="#">A Few Bad </a>
                <i class="el-icon-video-play"></i><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="dark">
                <span>7</span><a href="#">小星球</a>
                <i class="el-icon-video-play"></i><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="light">
                <span>8</span><a href="#">夜车 (歌手)</a>
                <i class="el-icon-video-play"></i><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="dark">
                <span>9</span><a href="#">A TO Z</a>
                <i class="el-icon-video-play"></i><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="light">
                <span class="ten">10</span><a href="#">A TO Z</a>
                <i class="el-icon-video-play"></i><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="dark check"><a href="#">查看更多></a></li>
            </ol>
          </dd>
        </dl>

        <dl>
          <dt class="light">
            <img src="./images/h.jpg" alt="飙升榜" />
            <div class="three">
              <a href="#">飙升榜</a>
              <div class="playGo">
                <i class="el-icon-video-play"></i>
                <i class="el-icon-folder-add"></i>
              </div>
            </div>
          </dt>
          <dd>
            <ol>
              <li class="dark">
                <span style="color: #c10d0c">1</span><a href="#">窗</a>
                <i class="el-icon-video-play"></i><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="light">
                <span style="color: #c10d0c">2</span><a href="#">好久不见</a>
                <i class="el-icon-video-play"></i><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="dark">
                <span style="color: #c10d0c">3</span
                ><a href="#">Best Friend </a> <i class="el-icon-video-play"></i
                ><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="light">
                <span>4</span><a href="#">银河与星斗</a>
                <i class="el-icon-video-play"></i><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="dark">
                <span>5</span><a href="#">心动的瞬间</a>
                <i class="el-icon-video-play"></i><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="light">
                <span>6</span><a href="#">A Few Bad </a>
                <i class="el-icon-video-play"></i><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="dark">
                <span>7</span><a href="#">小星球</a>
                <i class="el-icon-video-play"></i><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="light">
                <span>8</span><a href="#">夜车 (歌手)</a>
                <i class="el-icon-video-play"></i><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="dark">
                <span>9</span><a href="#">A TO Z</a>
                <i class="el-icon-video-play"></i><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="light">
                <span class="ten">10</span><a href="#">A TO Z</a>
                <i class="el-icon-video-play"></i><i class="el-icon-plus"></i>
                <i class="el-icon-folder-add"></i>
              </li>
              <li class="dark check"><a href="#">查看更多></a></li>
            </ol>
          </dd>
        </dl>
      </div>
    </div>

    <!-- 右边 -->
    <!-- 登录和入驻歌手 -->
    <div class="hotRight">
      <div class="login">
        <div class="enjoy">
          登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机
        </div>
        <button class="loginBtn">用户登录</button>
      </div>

      <div class="singer">
        <div class="showMore">
          <span>入驻歌手</span>
          <a href="#">查看全部></a>
        </div>

        <div class="singerMessage special">
          <div>
            <img src="./images/e.jpg" alt="" />
          </div>
          <div class="name">
            <a href="#" class="who">张惠妹aMEI</a>
            <span>台湾歌手张惠妹</span>
          </div>
        </div>

        <div class="singerMessage">
          <div>
            <img src="./images/e.jpg" alt="" />
          </div>
          <div class="name">
            <a href="#" class="who">张惠妹aMEI</a>
            <span>台湾歌手张惠妹</span>
          </div>
        </div>

        <div class="singerMessage">
          <div>
            <img src="./images/e.jpg" alt="" />
          </div>
          <div class="name">
            <a href="#" class="who">张惠妹aMEI</a>
            <span>台湾歌手张惠妹</span>
          </div>
        </div>

        <div class="singerMessage">
          <div>
            <img src="./images/e.jpg" alt="" />
          </div>
          <div class="name">
            <a href="#" class="who">张惠妹aMEI</a>
            <span>台湾歌手张惠妹</span>
          </div>
        </div>

        <div class="singerMessage">
          <div>
            <img src="./images/e.jpg" alt="" />
          </div>
          <div class="name">
            <a href="#" class="who">张惠妹aMEI</a>
            <span>台湾歌手张惠妹</span>
          </div>
        </div>

        <div class="singerMessage">
          <div>
            <img src="./images/e.jpg" alt="" />
          </div>
          <div class="name">
            <a href="#" class="who">张惠妹aMEI</a>
            <span>台湾歌手张惠妹</span>
          </div>
        </div>

        <button class="applicationBtn">申请成为网易音乐人</button>
      </div>

      <!-- 热门主播 -->
      <div class="anchorMessage">
        <div class="popularAnchor">热门主播</div>

        <div class="anchorName">
          <img src="./images/f.jpg" alt="头像" />
          <div class="introduction">
            <a href="#">陈立</a>
            <span>心理学家、美食家陈立教授</span>
          </div>
        </div>
        <div class="anchorName">
          <img src="./images/f.jpg" alt="头像" />
          <div class="introduction">
            <a href="#">陈立</a>
            <span>心理学家、美食家陈立教授</span>
          </div>
        </div>
        <div class="anchorName">
          <img src="./images/f.jpg" alt="头像" />
          <div class="introduction">
            <a href="#">陈立</a>
            <span>心理学家、美食家陈立教授</span>
          </div>
        </div>
        <div class="anchorName">
          <img src="./images/f.jpg" alt="头像" />
          <div class="introduction">
            <a href="#">陈立</a>
            <span>心理学家、美食家陈立教授</span>
          </div>
        </div>
        <div class="anchorName">
          <img src="./images/f.jpg" alt="头像" />
          <div class="introduction">
            <a href="#">陈立</a>
            <span>心理学家、美食家陈立教授</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TopRecommended'
}
</script>

<style scoped>
body,
html {
  background-color: #f1f1f1;
}
.hotRecommend {
  display: flex;
  width: 1000px;
  margin: 0 auto;
  padding: 0;
  background-color: white;
  border-left: 1px solid rgb(201, 200, 200);
  height: 1600px;
}
.hotLeft {
  width: 700px;
  padding: 20px 15px 0 15px;
}
.hotRight {
  width: 280px;
  border: 1px solid rgb(201, 200, 200);
}

.category {
  height: 33px;
  line-height: 33px;
  vertical-align: center;
  border-bottom: 2px solid #c10d0c;
  width: 100%;
  padding-bottom: 5px;
}
.hotWords {
  float: left;
  font-size: 25px;
  font-weight: normal;
  color: black;
}
.categoryList {
  float: left;
}
.more {
  float: right;
  font-size: 14px;
}
.categoryList a {
  height: 10px;
  padding: 0 18px;
  border-right: 1px solid black;
  font-size: 14px;
}
.categoryList a:hover {
  color: black;
}
/* 歌单列表 */
.playlist {
  padding: 20px 0 80px 0;
  height: 430px;
}

.playlistItem {
  width: 140px;
  height: 204px;
  display: inline-block;
}

.top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 35px;
}

.bottom {
  display: flex;
  justify-content: space-between;
}

.playDistrict {
  position: relative;
}
.playButton {
  position: absolute;
  bottom: 0px;
}
.description {
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  padding-top: 7px;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
}

/* 登录块和入驻歌手 */
.login {
  height: 126px;
  border: 1px solid transparent;
  background-color: rgb(238, 238, 238);
  border-bottom: 1px solid rgb(201, 200, 200);
}
.enjoy {
  width: 205px;
  margin: 20px auto;
  font-size: 12px;
  color: #666666;
  font-family: Arial, Helvetica, sans-serif;
  height: 50px;
  line-height: 25px;
}
.loginBtn {
  display: block;
  margin: 0 auto;
  width: 100px;
  height: 31px;
  background-color: rgb(199, 11, 18);
  color: aliceblue;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.loginBtn:hover {
  background-color: rgb(214, 23, 30);
}
/* 入驻歌手 */
.singer {
  padding: 18px 15px 16px 15px;
}
.showMore {
  border-bottom: 1px solid rgb(187, 185, 185);
  height: 24px;
  line-height: 24px;
  vertical-align: center;
}
.showMore span {
  font-weight: bolder;
}
.showMore a {
  float: right;
}

.singerMessage {
  display: flex;
  margin: 10px 0 10px 0;
}

.singerMessage:hover {
  cursor: pointer;
}
.special {
  margin-top: 20px;
}

.name {
  border: 1px solid rgb(226, 226, 226);
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-left: 15px;
  justify-content: space-evenly;
  height: 60px;
  background-color: rgb(244, 244, 244);
}

.who {
  font-weight: bold;
  font-size: 14px;
}

.applicationBtn {
  width: 260px;
  height: 31px;
  border-radius: 3px;
  border: 1px solid rgb(204, 204, 204);
  cursor: pointer;
  font-weight: bolder;
}

.applicationBtn:hover {
  background-color: #fdfdfd;
}

/* 热门主播 */
.anchorMessage {
  padding: 18px 15px 20px 15px;
}
.popularAnchor {
  font-weight: bolder;
  border-bottom: 1px solid rgb(187, 185, 185);
  padding-bottom: 5px;
}
.anchorName {
  display: flex;
  margin: 10px 0;
}
.introduction {
  display: flex;
  flex-direction: column;
  height: 40px;
  padding-left: 10px;
  line-height: 20px;
}

/* 左边继续写 */
/* 新碟上架 */
.newCD {
  border-bottom: 2px solid #c10d0c;
  height: 35px;
  line-height: 35px;
  vertical-align: center;
  padding-bottom: 5px;
}

.newCD a {
  font-size: 25px;
  font-weight: normal;
  color: black;
  font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif;
}

.newCD span {
  float: right;
}
.scrollView {
  width: 687px;
  height: 184px;
  border: 1px solid rgb(202, 202, 202);
  margin-top: 20px;
}

/* 榜单 */
.rank {
  border-bottom: 2px solid #c10d0c;
  height: 35px;
  line-height: 35px;
  vertical-align: center;
  padding-bottom: 5px;
  margin-top: 30px;
}
.rank span {
  font-size: 25px;
  font-weight: normal;
  color: black;
  font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif;
}

.rank a {
  float: right;
}

/* 轮播图 */

/* 榜单列表 */
.rankList {
  display: flex;
  border: 1px solid rgb(187, 187, 187);
  border-right: none;
  margin-top: 20px;
}
dl {
  flex-grow: 1;
  border-right: 1px solid rgb(187, 187, 187);
}
dt {
  display: flex;
  height: 120px;
  padding: 20px 0px 0px 19px;
}

dt img {
  width: 80px;
  height: 80px;
}

.three {
  height: 65px;
  width: 75px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
dt img {
  cursor: pointer;
}
.three a {
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bolder;
  color: black;
}
.three i {
  font-size: 29px;
  color: rgb(180, 180, 180);
}
.three i:hover {
  cursor: pointer;
  color: rgb(138, 136, 136);
}
.playGo {
  display: flex;
}

li {
  height: 31px;
  line-height: 31px;
  vertical-align: center;
}

.light {
  background-color: rgb(244, 244, 244);
}

.dark {
  background-color: rgb(232, 232, 232);
}
li span {
  display: inline-block;
  padding-left: 25px;
  padding-right: 15px;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
}

li a {
  display: inline-block;
  width: 110px;
  font-size: 12px;
  color: black;
}
.ten {
  padding-right: 11px;
  padding-left: 21px;
}

li i {
  padding-left: 3px;
  padding-right: 3px;
  font-size: 15px;
  font-weight: bold;
  color: rgb(138, 136, 136);
}

.check a {
  width: 64px;
  float: right;
}
</style>
